<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata1"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">仓库信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓库名称:" prop="storageName">
              <el-input clearable v-model="fromdata.storageName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市:" prop="cityCode">
              <CitySelect v-model="fromdata.cityCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库类别:" prop="storageType">
              <el-select clearable v-model="fromdata.storageType">
                <el-option
                  v-for="item in dictArray['仓库类别']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="首选仓库:" label-width="150">
              <el-switch
                active-text="首选"
                v-model="fromdata.preferred"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="countyCode">
              <District :cityCode="fromdata.cityCode" v-model="fromdata.countyCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库状态:">
              <el-select clearable v-model="fromdata.status">
                <el-option
                  v-for="item in dictArray['仓库状态']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库规模:">
              <el-input clearable v-model.number="fromdata.area" style="width: 200px">
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="是否开放给其他门店调拨:"
              prop="openRestsStore"
              label-width="150"
            >
              <el-switch
                active-text="启用"
                v-model="fromdata.openRestsStore"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属门店:" prop="storeId">
              <JobShop clearable v-model="fromdata.storeId" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="仓库地址:" prop="address">
              <el-input clearable v-model="fromdata.address" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库备注:">
              <el-input
                type="textarea"
                :rows="6"
                placeholder=""
                v-model="fromdata.remark"
                style="width: 600px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">管理人员</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="管理人员:" prop="manageUserName" label-width="120px">
              <el-input
                @focus="employeeFocus"
                clearable
                v-model="fromdata.manageUserName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="storagePhone" label-width="120px">
              <el-input clearable v-model.number="fromdata.storagePhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" align="right" justify="center">
            <el-button type="success" @click="saveUpdate">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #dialog>
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[fromdata.manageUserName]"
      />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from "@/mixins/base";
import {
  update,
  add,
  getFindById,
} from "@/api/after-sale/storehouseManage/warehouseManage";
import CityDistrictSelector from "@/components/CityDistrictSelector/index";
import { getDict } from "@/utils";
import EmployeeTable from "../../systemManage/store/components/EmployeeTable";
export default {
  components: {
    CityDistrictSelector,
    EmployeeTable,
  },
  mixins: [
    baseMixin({
      addData: add,
      updateData: update,
      format(res) {
        return res.map((data) => {
          return data;
        });
      },
    }),
  ],
  data() {
    return {
      fromdata: {
        cityCode: "", // 城市编码
        countyCode: "", // 区县编码
        storageType: "",
        storagePhone: "",
        manageUserName: "",
        id: "",
      },
      rules: {
        cityCode: [{ required: true, message: "请选择城市", trigger: "change" }],
        storageType: [{ required: true, message: "请选择仓库类别", trigger: "change" }],
        address: [{ required: true, message: "请输入仓库地址", trigger: "blur" }],
        storageName: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
        countyCode: [{ required: true, message: "请选择区县", trigger: "change" }],
        storeId: [{ required: true, message: "请选择所属门店", trigger: "change" }],
      },
      dictArray: [],
    };
  },
  methods: {
    // 监听城市区县组件返回值
    cityValue(value) {
      this.fromdata.cityCode = value[0];
      this.fromdata.countyCode = value[1];
    },
    saveUpdate() {
      this.$refs["fromdata1"].validate((valid1) => {
        this.$refs["fromdata"].validate((valid) => {
          if (valid1 && valid) {
            this.handleDataUpdate(this.fromdata);
            this.closeRouter("/storehouseManage/warehouseManage");
          }
        });
      });
    },
    //打开员工选择列表
    employeeFocus() {
      console.log(11);
      this.handleDataInsert("员工列表");
    },
    //员工选择
    employeListSelectCheck(select) {
      this.fromdata.manageUserName = select[0].userName;
      this.fromdata.storagePhone = select[0].phone;
      this.fromdata.managerName = select[0].userName;
      this.fromdata.manageUserId = select[0].id;
      this.dialogClose();
    },
    async detail(id) {
      let { data } = await getFindById(id);
      this.fromdata = data;
    },
  },
  mounted() {
    this.dictArray = getDict(["仓库类别", "仓库状态"]);
    let id = this.$route.query.id;
    if (id) {
      this.fromdata.id = id;
      this.detail(id);
    }
  },
};
</script>
<style lang="scss" scoped></style>
